<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box1{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
        }
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        } */
     
        .box2{
            width: 800px;
            height: 400px;
            position: relative;
            border: #ccc 1px solid;
        }
        .box{
            width: 50px;
            height: 50px;
            border-radius: 999px;
           background-color: red;
            position: absolute;
            background-image: url(./zzzzz.jpg);
            background-repeat: no-repeat;
            background-size: 50px 50px;
            
        }
    </style>
</head>
<script src="../js/js.vue.js"></script>
<body> 
    
           <!-- <a href="http://www.baidu.com" class="box">baidu</a>
           <script>
           let link=document.querySelector('.box')
           link.addEventListener('click',(e)=>{
            e.preventDefault();
            alert('杨小超')
           })
           </script> -->
            <!-- <div id="box">
           <div class="box1" @mousemove="move($event)"></div> 
            <div class="box" @click="f2">
            <button @click="f1">点击</button>
           </div>
           </div> 
          
           <script>
            Vue.createApp({
                data(){
                        return{
                            
                        }

                 },
                 methods:{
                    f1(){
                        console.log('点击了按钮')
                    },
                    f2(){
                        console.log('点击了盒子')
                    }
                 } -->

                <!-- // methods:{
                //     move(e){
                //       console.log(e.clientX,e.clientY)
                // }
                //} -->
                
            <!-- }).mount('#box') --> 
        <!-- </script> -->
             <div id="app" >
                <div class="box2" @mousemove="move($event)">
                <div class="box" :style="{left:X, top:Y}" @mousemove.stop>
                    
                </div>
             </div>
             <!-- <input type="text" @keyup.up="metc($event)"> -->
            </div>
             <script>
              
                    // requestAnimationFrame(arr)
                Vue.createApp({
                    data(){
                        return{
                              X:'0px',
                              Y:'0px'
                        }
                    }, 
                    methods:{
                        move(a){
                            this.X=a.clientX -25+'px';
                            this.Y=a.clientY-25+'px';    
                        }
                    //     ,metc(e){
                    //     console.log(e)
                    // }
                    }
                    
                }).mount('#app')
             </script>
          
</body>
</html>